<script setup lang="ts">
import { ref } from 'vue'
import Detail from './components/Detail.vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '自销码' },
  { orderState: 1, title: '外销码' },
])
const range = ref(['2021-03-8', '2021-4-20'])

const contentText = {
  contentdown: '查看更多',
  contentrefresh: '加载中',
  contentnomore: '没有更多',
}
// 获取页面参数
const query = defineProps<{
  type: string
}>()

// uni-ui 弹出层组件 ref
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

// 打开想起弹窗
const open = () => {
  popup.value?.open()
}

// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))

// 搜索
const form = ref({
  name: '',
  time: '',
})
const onDateChange = (e: any) => {
  console.log(...e)
}
const onSubmit = () => {}
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 50 + 10 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
      <!-- 滑动项 -->
      <swiper-item>
        <!-- 列表 -->
        <scroll-view scroll-y class="orders">
          <view class="top_total">
            <view class="label"><text>总数:</text>89850</view>
            <view class="label"><text>已售出:</text>89850</view>
            <view class="label"><text>未售出:</text>89850</view>
            <view class="label"><text>作废:</text>89850</view>
          </view>
          <!-- 表单内容 -->
          <view class="form">
            <view class="form-content">
              <view class="form-item">
                <text class="label">承销商名称：</text>
                <input class="input" type="text" placeholder="请填写" v-model="form.name" />
              </view>
              <view class="form-item">
                <text class="label">日期</text>
                <uni-datetime-picker
                  v-model="range"
                  type="daterange"
                  start="2024-1-1"
                  end="2026-1-1"
                  rangeSeparator="至"
                  @change="onDateChange"
                >
                  <view v-if="false">2000-01-01</view>
                  <view class="placeholder" v-else>请选择日期</view>
                </uni-datetime-picker>
              </view>
              <!-- 提交按钮 -->
              <button class="form-button" @tap="onSubmit">搜索条码</button>
            </view>
          </view>
          <view class="list">
            <view class="title">
              <text>条码列表</text>
              <view class="timePicker">
                <uni-datetime-picker
                  v-model="range"
                  type="daterange"
                  start="2021-3-20"
                  end="2021-5-20"
                  rangeSeparator="至"
                />
              </view>
            </view>
            <uni-list-item
              title="条码编号：454564FJJ"
              note="日期：2020-12-20"
              rightText="数量：5000"
              v-for="item in 5"
              :key="item"
            />
          </view>
        </scroll-view>
        <!-- 底部提示文字 -->
        <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
          {{ true ? '没有更多数据~' : '正在加载...' }}
        </view>
      </swiper-item>
      <!-- 滑动项 -->
      <swiper-item>
        <!-- 外销码列表 -->
        <scroll-view scroll-y class="orders">
          <view class="top_total">
            <view class="label"><text>总数:</text>89850</view>
            <view class="label"><text>已售出:</text>89850</view>
            <view class="label"><text>未售出:</text>89850</view>
            <view class="label"><text>作废:</text>89850</view>
          </view>
          <view class="list">
            <view class="title">
              <text>条码列表</text>
              <view class="timePicker">
                <uni-datetime-picker
                  v-model="range"
                  type="daterange"
                  start="2021-3-20"
                  end="2021-5-20"
                  rangeSeparator="至"
                />
              </view>
            </view>
            <uni-list-item
              title="承销商：内蒙古鄂尔多斯市东胜区三联超市"
              note="日期：2020-12-20"
              rightText="数量：5000"
              showArrow
              v-for="item in 5"
              :key="item"
              clickable
              @click="open"
            />
            <uni-load-more status="more" :content-text="contentText" />
          </view>
        </scroll-view>
        <!-- 底部提示文字 -->
        <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
          {{ true ? '没有更多数据~' : '正在加载...' }}
        </view>
      </swiper-item>
    </swiper>
  </view>
  <!-- 弹出层 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff" >
    <Detail @close="popup?.close()" />
  </uni-popup>
</template>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// 表单
.form {
  background-color: #f4f4f4;
  margin-bottom: 10px;
  &-content {
    margin: 20rpx 20rpx 0;
    padding: 10px 20rpx 5px;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }

  &-button {
    height: 70rpx;
    width: 150px;
    text-align: center;
    line-height: 70rpx;
    margin: 30rpx auto;
    color: #fff;
    border-radius: 70rpx;
    font-size: 28rpx;
    background-color: #27ba9b;
  }
}

.top_total {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
  .label {
    width: 50%;
    margin: 5px 0;
    text {
      display: inline-block;
      width: 150rpx;
      color: #666;
    }
  }
}

.list .title {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
  align-items: center;
  padding-left: 15px;
  height: 40px;
  background-color: #ddd;
  text {
    font-weight: normal;
    color: #666;
    font-size: 14px;
  }
  .timePicker {
    width: 70%;
  }
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}
</style>
